<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swp-page swiper-slide" v-for="list in lists" :key="list.id">
        <a class="js-no-follow" href="https://h5.koudaitong.com/v2/index/rukou">
          <img class="goods-main-photo fadeIn"
               :src="list.img">
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'

  export default {
    name: "Swipe",
    props: {
      lists: {
        type: Array,
        required: true
      }
    },
    created() {
    },
    mounted() {
      let mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        }
      })
    }
  }
</script>

<style scoped lang="css">
  .swiper-container {
    width: 100%;
    /*height: 300px;*/
  }

  .custom-image-swiper .swiper-slide a {
    display: block;
    width: 100%;
    position: relative;
    text-align: center;
  }
  .swiper-slide img {
    width: 100%;
    height: 100%;
  }
</style>
